<template>
	<!-- 首页标题栏，轮播图整合插件 -->
	<view class="banner-swiper-wrap u-m-b-10">
	
		<!-- 轮播组件 -->
		<swiper class="screen-swiper square-dot" @animationfinish="onanimationfinish" @change="onChange"
			style="height: 450rpx" :indicator-dots="true" :circular="true" :autoplay="isautoplay" interval="5000"
			duration="500">
			<swiper-item v-for="(item, index) in list" :key="index" @tap="onSwiper(index)">
				<image :src="item.path" mode="aspectFill" v-if="item.type=='IMAGE'"></image>
				<!-- <image :src="item.path+'?x-oss-process=video/snapshot,t_0'" mode="aspectFill"  v-if="item.type=='MEDIA'" ></image> -->
				<video v-if="item.type=='MEDIA' && isshow" :autoplay="isvideoplay" show-mute-btn="true" :muted="ismuted"
					@play="isplay" @pause="ispause" @ended="isstop" @fullscreenchange="creenchange" id="myVideo"
					:src="item.path" show-fullscreen-btn="false" @error="videoErrorCallback"
					enable-progress-gesture="false" object-fit="fill"
					:poster="item.path+'?x-oss-process=video/snapshot,t_0'"></video>
				<image v-if="item.type=='MEDIA' && !isshow" :src="item.path+'?x-oss-process=video/snapshot,t_0'" mode="aspectFill"  ></image> 
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	/**
	 * home-head-轮播卡片,主要为了处理数据
	 * @property {Array} list 轮播图数据，
	 * @property {String} mode 指示器模式
	 * @property {String} navTitle 项目名称
	 */
	export default {
		components: {},
		data() {
			return {
				navBgImage: '',
				changeNavBackground: false,
				swiperCur: 0,
				statusBarHeight: 0,
				videoContext: {},
				playing: false,
				pause: true,
				isautoplay: true,
				isshow: true,
				isvideo: true,
				ismuted: true,
				isvideoplay:true
			};
		},
		props: {
			isScorll: {
				type: Boolean,
				default: false
			},
			// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			navTitle: {
				type: String,
				default: '69商城'
			},
			navTitleStyle: {
				type: Object,
				default: () => {
					return {
						color: '#fff',
						fontSize: '38rpx',
						fontWeight: '600',
					};
				}
			}
		},
		watch: {
			isScorll(newValue, oldValue) {
				this.changeNavBackground = newValue;
				this.navBgImage = this.list[this.swiperCur].path;
			}
		},
		computed: {
			// 导航栏内部盒子的样式
			navbarInnerStyle() {
				let style = {};
				style.height = this.navbarHeight + 'px';
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				//style.marginRight = rightButtonWidth + 'px';
				// #endif
				return style;
			},
			// 整个导航栏的样式
			navbarStyle() {
				let style = {};
				style.zIndex = this.$u.zIndex.navbar;
				style.background = this.changeNavBackground ? `url(${this.navBgImage}) no-repeat top / 100% auto` : 'none';
				Object.assign(style, this.background);
				return style;
			},
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 44;
				// #endif
				// #ifdef MP
				return systemInfo.platform == 'ios' ? 44 : 48;
				// #endif
			}
		},
		created() {
			this.navBgImage = this.list[0].image;
			this.videoContext = uni.createVideoContext('myVideo', this)

		},
		methods: {
			videoErrorCallback: function(e) {
		 	uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			onSwiper(e) {
				let item = this.list[e]
			 
				if (item.type == 'IMAGE') {
					// this.isshow =false;
					this.videoContext.pause();
					let idlist = item.url.split('/');

					if (item.url.indexOf("product/list/") != -1) {
						this.$Router.push({
							path: "/pages/goods/list",
							query: {
								id: idlist[idlist.length - 1]
							}
						});
					}
					 
					if (item.url.indexOf("product/detail/") != -1) {
						this.$Router.push({
							path: "/pages/goods/detail",
							query: {
								id: idlist[idlist.length - 1]
							}
						});
					}
					if (item.url.indexOf("/store/") != -1) {
						uni.setStorageSync("detailStoreId", idlist[idlist.length - 1])
						this.$Router.push({
							path: "/pages/store/index",
							query: {
								id: idlist[idlist.length - 1]
							}
						});
					}
					if(item.url.indexOf("/shangxian")!=-1){
						
						this.$Router.push({
							path: "/pages/goods/shangxian",
							
						});
					}
					if(item.url.indexOf("/zongxiang")!=-1){
						
						this.$Router.push({
							path: "/pages/goods/zongxiang",
							
						});
					}
					if(item.url.indexOf("/qingliang")!=-1){
						
						this.$Router.push({
							path: "/pages/goods/qingliang",
							
						});
					}
			} 	else if (item.type == 'MEDIA') {

					// if(this.isshow){
					// if(this.pause){
					this.videoContext.play();


					// }
					// if(this.playing){
					// 	this.videoContext.pause();
					// }
				 // // }
					// else{
					//  this.isshow =true;
			 	//     this.videoContext.play(); 
					// }
				}


			},
			creenchange(e) {

			},
			onanimationfinish(e) {
				this.swiperCur = e.detail.current;

				let item = this.list[this.swiperCur]

				if (item.type == 'MEDIA') {
					//this.videoContext.play();
					this.isshow = true;
					this.isvideoplay =true
				} else {
					this.isshow = false;
				}

			},
			onChange(e) {
				this.swiperCur = e.detail.current;

				let item = this.list[this.swiperCur]
				if (item.type == 'MEDIA') {
					this.isshow = false;
				}


			},
			isplay: function() {
				this.playing = true
				this.pause = false
				this.isautoplay = false;
			},
			ispause: function() {
				this.pause = true
				this.playing = false
				this.isautoplay = true;
			},
			isstop: function() {
				this.isautoplay = true;
			},


		}
	};
</script>

<style lang="scss" scoped>
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;

		/* #endif */
	}

	// 轮播
	.banner-swiper-wrap {
		height: 450rpx;
		width: 98%;
		margin-left: 1%;
		position: relative;
		z-index: 100;

		.search-box {
			width: 66rpx;
			height: 66rpx;
			background: rgba(#000, 0.18);
			border-radius: 100%;
		}

		.hover-search {
			background: rgba(#fff, 0.18);
		}
	}

	.u-navbar {
		width: 100%;
	}

	.u-navbar-fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 991;
	}

	.u-status-bar {
		width: 100%;
	}

	.u-navbar-inner {
		@include vue-flex;
		justify-content: space-between;
		position: relative;
		align-items: center;
	}

	.u-back-wrap {
		@include vue-flex;
		align-items: center;
		flex: 1;
		flex-grow: 0;
		padding: 14rpx 14rpx 14rpx 24rpx;
	}
</style>
